<template>
  <app-def-main-layout>
    <div>
      <a-form layout="inline" class="app-query-form">
        <a-form-item label="省">
          <a-input v-model:value="queryParams.provinceName" placeholder="请输入..." />
        </a-form-item>
        <a-form-item label="市">
          <a-input v-model:value="queryParams.cityName" placeholder="请输入..." />
        </a-form-item>
        <a-form-item label="区/县">
          <a-input v-model:value="queryParams.areaName" placeholder="请输入..." />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="query(true)">
            <app-dynamic-icon iconName="SearchOutlined" />查询
          </a-button>
        </a-form-item>
      </a-form>
      <a-table
        :size="'middle'"
        :dataSource="dataSource"
        :columns="columns"
        :pagination="pagination"
        :bordered="true"
        @change="handleTableChange"
        class="app-data-table-container"
      >
        <template #indexRender="{ index }">{{ index + 1 }}</template>
      </a-table>
    </div>
  </app-def-main-layout>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import DistrictApi from '@/platform/apis/district-api';
import CommonUtil from '@/platform/commons/utils/common-util';
import { ColumnProps } from 'ant-design-vue/es/table/interface';
type Key = ColumnProps['key'];

export default defineComponent({
  name: 'DistrictList',
  components: {
  },
  setup() {
    const dataSource = ref<any>([]);
    const selectedRowKeys = ref<Key[]>([]);

    const queryParams = CommonUtil.queryParamsInit({
      userName: '',
      realName: '',
    });

    const columns = [
      {
        title: '序号',
        key: 'index',
        dataIndex: 'index',
        width: '80px',
        slots: { customRender: 'indexRender' },
      },
      {
        title: '省编号',
        dataIndex: 'provinceCode',
        key: 'provinceCode',
      },
      {
        title: '省名称',
        dataIndex: 'provinceName',
        key: 'provinceName',
      },
      {
        title: '市编号',
        dataIndex: 'cityCode',
        key: 'cityCode',
      },
      {
        title: '市名称',
        dataIndex: 'cityName',
        key: 'cityName',
      },
      {
        title: '区/县编号',
        dataIndex: 'areaCode',
        key: 'areaCode',
      },
      {
        title: '区/县名称',
        dataIndex: 'areaName',
        key: 'areaName',
      },
    ];


    /**
     * 初始化页面数据
     */
    const initPageData = () => {

    };

    /**
     * 查询数据
     */
    const query = (btnQuery = false) => {
      selectedRowKeys.value = [];
      CommonUtil.queryDataByConditionPaging(
        btnQuery,
        queryParams,
        DistrictApi.queryDistrictByConditionPaging,
        dataSource
      );
    };

    /**
     *分页计算
     */
    const pagination = CommonUtil.paginationComputed(queryParams);

    //分页参数改变处理
    const handleTableChange = (pag: any) => CommonUtil.paginationChange(queryParams, pag, query);


    onMounted(() => {
      initPageData();
      query();
    });

    return {
      queryParams,
      columns,
      pagination,
      dataSource,
      handleTableChange,
      query,
      selectedRowKeys
    };
  },
});
</script>

<style lang="less" scoped>
@import "./DistrictList.less";
</style>
